.vir-table {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding-bottom: $-vir-table-page-heigth;

  .vir-table-table {
    width: 100%;
    height: 100%;
  }

  .vir-table-page {
    position: absolute;
    width: 100%;
    bottom: 0px;
  }

  .el-table {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-top: $-vir-table-th-heigth;

    .el-table__header-wrapper {
      height: $-vir-table-th-heigth;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      top: 0px;

      th {
        padding: 8px 0px;
        box-sizing: border-box;
        color: $-vir-table-header-color;
        background: $-vir-table-header-background;
      }
    }

    .el-table__body-wrapper {
      @include vir_scrollbar();
      box-sizing: border-box;
      height: 100%;
      width: 100%;

      td {
        padding: 5px 0px;

        // 内部按钮
        .el-button {
          padding: 5px 10px;
          font-size: 12px;
          border-radius: 0px;

          &:hover {
            border-left-color: #c6e2ff;
            border-right-color: #c6e2ff;

            &.is-plain {
              border-left-color: #409EFF;
              border-right-color: #409EFF;
            }
          }

          &:active {
            border-left-color: #3a8ee6;
            border-right-color: #3a8ee6;

            &.is-plain {
              border-left-color: #3a8ee6;
              border-right-color: #3a8ee6;
            }
          }

          &.el-button--info {
            border-left-color: #909399;
            border-right-color: #909399;

            &.is-plain {
              border-left-color: #d3d4d6;
              border-right-color: #d3d4d6;
            }
          }

          &.el-button--danger {
            border-left-color: #f56c6c;
            border-right-color: #f56c6c;

            &.is-plain {
              border-left-color: #fbc4c4;
              border-right-color: #fbc4c4;
            }
          }

          &.el-button--warning {
            border-left-color: #e6a23c;
            border-right-color: #e6a23c;

            &.is-plain {
              border-left-color: #f5dab1;
              border-right-color: #f5dab1;
            }
          }

          &.el-button--primary {
            border-left-color: #409EFF;
            border-right-color: #409EFF;

            &.is-plain {
              border-left-color: #b3d8ff;
              border-right-color: #b3d8ff;
            }
          }

          &.el-button--success {
            border-left-color: #67c23a;
            border-right-color: #67c23a;

            &.is-plain {
              border-left-color: #c2e7b0;
              border-right-color: #c2e7b0;
            }
          }

        }

        // 内部按钮组
        .el-button-group {
          vertical-align: baseline;
        }

        .cell {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          height: $-vir-table-td-heigth;
          line-height: $-vir-table-td-heigth;

          img {
            width: $-vir-table-td-heigth;
            height: $-vir-table-td-heigth;
          }
        }
      }
    }
  }

  .el-pagination {
    width: 100%;
    padding: 5px 0px;
    text-align: center;
    box-sizing: border-box;
    height: $-vir-table-page-heigth;
  }
}